<script setup lang="ts">
import { ref, computed } from 'vue'
import { NIcon, NButton, NDrawer, NDrawerContent, NInput, } from 'naive-ui'
//获取屏幕高度
// let windowHeight = window.innerHeight;
const meunIndex = ref(-1)
// const botom = ref(0)
const isMeun = ref(false)
const isForm = ref(false)

const searchValue = ref<string>()


// const MeunHeight = ref()
// MeunHeight.value = windowHeight

const meunList = ref([
    {
        id: 0,
        bg: '/src/assets/image/meun/1.jpeg'
    },
    {
        id: 1,
        bg: '/src/assets/image/meun/2.jpg'
    },
    {
        id: 2,
        bg: '/src/assets/image/meun/3.jpg'
    },

]
)

function meunClick(params: any) {
    console.log(params);
    if (params == 0) {
        //菜单
        isMeun.value = !isMeun.value
    } else if (params == 1) {
        //设置
    } else {
        console.log('kldskldsklds');

        //打开应用
        isForm.value = true
    }
}
function liClick(params: any) {
    console.log(params);

    if (params == 1) {
        //菜单
    } else if (params == 2) {

    } else if (params == 3) {

    } else if (params > 3) {
        isMeun.value = false
        isForm.value = true
    }
    // isForm.value = !isForm.value

    // isMeun = false,isForm =true
}


</script>
<template>
    <!-- <n-button type="primary" attr-type="button" @click="isMeun =true">
        登录
      </n-button> -->
       <!-- 头部 -->
       <div class="heard">
        <div class="icon" >
            <div style="height:100%; width: 100px;background-color:aqua;border: solid 1px red;">
                
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                    <path d="M150 0 L75 200 L225 200 Z" />
                </svg>
            </div>
            发达集团数字智能平台
        </div>
       </div>
    <div class="mainLayout" style="">
       


        <div class="zhuomian">

        </div>    
    </div>
    <div class="meun">
        <div class="meun_ul" :class="{ d: index == meunIndex }"
            :style="{ background: `url( ${item.bg} )`, backgroundSize: `cover` }" v-for="(item, index) in meunList"
            :key="index" @mouseenter="meunIndex = item.id" @mouseleave="meunIndex = -1" @click="meunClick(item.id)">
        </div>
    </div>






     <!-- 菜单打开抽屉 -->
    <div v-if="isMeun" class="sidenav" :style="{ height: isMeun ? 100 + '%' : 0 }" @click.stop="isMeun = false">
        <div class="sidenav_content">
            <div class="search" @click.stop>
                <n-input v-model:value="searchValue" type="text" placeholder="搜索" style="width: 300px;"></n-input>
            </div>
            <div class="search_list" @click.stop>
                <div class="search_list_ul">
                    <div class="search_list_li" v-for="i in 100 " @click="liClick(i)">
                        <img src="../../assets/image/meun/3.jpg" alt="" srcset=""
                            style="height:80px;border-radius: 10px;">
                        <span style="display: inline-block;color: white;font-weight: 900;">微信</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 打开应用 -->
    <div v-if="isForm" class="business" style=" height: 100px;width:100px">
        我是ifrom
        <!-- <div class="sidenav_content">
             <div class="search" @click.stop><div v-if="isForm" class="business" :style="{ height: isMeun ? 100 + '%' : 0 }">
                 <n-input v-model:value="searchValue" type="text" placeholder="搜索" style="width: 300px;"></n-input>
             </div>
             <div class="search_list" @click.stop>
                 <div class="search_list_ul">
                     <div class="search_list_li" v-for="i in 100 " @click="liClick">
                         <img src="../../assets/image/meun/3.jpg" alt="" srcset="" style="height:80px;border-radius: 10px;">
                         <span style="display: inline-block;color: white;font-weight: 900;">微信</span>
                     </div>
                 </div>
             </div>
         </div> -->
    </div>

</template>
<style lang="scss" scoped>

.heard{
    height: 80px;
    width: 100%; 
    border: solid 1px rgb(16, 20, 214);
    /*background-color: red;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: white;
}

.icon{
    height: 100%;
    width: 500px;
    line-height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}





.mainLayout {
    height: 100%;
    width: 100%;
    /*background: url(/src/assets/image/mbg1.jpeg) no-repeat;
    background-size: cover;*/
    overflow: hidden;
    /*display: flex;
    justify-content: center;
      flex-direction: column;;*/
    animation: changeBg 30s infinite;
}


.zhuomian {
    height: calc(100% - 80px);
    width: 100%;
    border: solid 1px red;
}





















.meun {
    height: 80px;
    /*width: 100%;*/
    width: auto;
    padding: 10px;
    box-sizing: border-box;
    /* border: solid red 1px;*/
    border-radius: 10px;
    display: inline-block;
    position: fixed;
    left: 50%;
    /* right: 0; */
    transform: translateX(-50%);
    /*left: 0;*/
    bottom: 0;
    /*right: 0;*/
    background-color: rgba(255, 255, 255, .5);
    cursor: pointer;
    z-index: 999;

}

.meun_ul {
    height: 60px;
    width: 60px;
    box-sizing: border-box;
    /*  border: solid blue 1px;*/
    border-radius: 10px;
    display: inline-block;
    /*  background: url(/src/assets/image/meun/1.jpeg) no-repeat;
    background-size: cover;*/
    margin-left: 5px;
    /* position: relative;*/
}

.meun_ul:nth-child(1) {
    margin-left: 0px;
}

.a {
    /* height: 70px;
    width: 70px;*/
    position: relative;
    bottom: 30px;
}

.d {
    /*height: 80px;
     width: 80px;*/
    transform: scale(1.5);

    position: relative;
    bottom: 20px;
    animation: bounce 0.3s 1;
}

.sidenav {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    /* background-color: rgba(228, 24, 24, 0.9);*/
    background: linear-gradient(0deg, rgba(46, 45, 47, 0.9) 0%, rgba(238, 232, 220, 0.9) 42%, rgba(61, 66, 67, 0.9) 100%);
    overflow-y: hidden;
    transition: 0.5s;
}

.sidenav_content {
    height: 100%;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    /*border: solid;*/
}


.search_content {
    height: 100px;
    width: 100%;

}

.search_list {
    height: 87%;
    width: 100%;
    margin-top: 20px;
    box-sizing: border-box;
    /* border: solid 1px red;*/
    overflow: scroll;
    scrollbar-width: none;
    /*firefox */
    -ms-overflow-style: none;
}

.search_list::-webkit-scrollbar {
    display: none;
    /*Chrome Safari */
}

.search_list_ul {
    display: grid;
    grid-template-columns: repeat(9, 100px);
    /*grid-template-columns: auto auto auto auto auto auto auto auto auto;*/
    gap: 49px;

}

.search_list_li {
    height: 120px;
    width: 100px;
    box-sizing: border-box;
    border: none;
    /* margin: 20px;*/
}



.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto;
    grid-gap: 50px;
    justify-content: center
        /*background-color: #2196F3;
    padding: 10px;*/
}

.grid-container>div {
    height: 100px;
    width: 100px;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}




.business {
    position: absolute;
    height: calc(100% - 80px);
    width: 100%;
    border: solid 1px blue;
    top: 0;
    left: 0;


}
















@keyframes bounce {
    0% {
        bottom: 0px;
    }

    100% {
        bottom: 20px;
    }
}

@keyframes changeBg {
    0% {
        background: url('/src/assets/image/mbg1.jpeg') no-repeat;
        background-size: cover;
        //background-color: white;
    }

    25% {
        background: url('/src/assets/image/mbg2.jpeg') no-repeat;
        background-size: cover;
        //background-color: red;
    }

    50% {
        background: url('/src/assets/image/mbg3.jpeg') no-repeat;
        background-size: cover;
        //background-color: blue;
    }

    75% {
        background: url('/src/assets/image/mbg4.jpeg') no-repeat;
        background-size: cover;
        //background-color: green;
    }

    100% {
        background: url('/src/assets/image/mbg5.jpeg') no-repeat;
        background-size: cover;
        //background-color: red;
    }
}
</style>